<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :value-format="dataFormat"
          align="right"
          @change="dateChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="hasPermission([permission])"
          icon="el-icon-search" type="primary" @click="fetchData" :disabled="loading" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="chart-one">
      <div :id="chartDomId" class="chart-container"></div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import * as echarts from 'echarts'
import {fetchData} from '@/api/statistics'
import * as moment from 'moment'
const domPrefix = 'chart-dom-'
const dataFormat = 'yyyy-MM-DD HH:mm:ss'
const dataFormat2 = 'YYYY-MM-DD HH:mm:ss'
const pickerOptions = {
  shortcuts: [{
    text: '最近一周',
    onClick: (picker) => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', [start, end])
    }
  }, {
    text: '最近一个月',
    onClick: (picker) => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      picker.$emit('pick', [start, end])
    }
  }, {
    text: '最近三个月',
    onClick: (picker) => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      picker.$emit('pick', [start, end])
    }
  }]
}

const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight'
]

export default {
  name: 'common',
  props: {
    url: '',
    permission: ''
  },
  data () {
    return {
      pickerOptions: pickerOptions,
      dateRange: [],
      dataFormat: dataFormat,
      query: {
        startTime: null,
        endTime: null
      },
      loading: false,
      app: {},
      myChart: null,
      labelOption: null,
      chartOption: null,
      chartDomId: null
    }
  },
  created () {
    this.chartDomId = _.uniqueId(domPrefix)
    const start = moment().subtract(1, 'month')
    const end = moment()
    this.query.startTime = start.format(dataFormat2)
    this.query.endTime = end.format(dataFormat2)
    this.dateRange.push(start.toDate())
    this.dateRange.push(end.toDate())
  },
  mounted () {
    const chartDom = document.getElementById(this.chartDomId)
    this.myChart = echarts.init(chartDom)
    this.app.configParameters = {
      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: 'left',
          center: 'center',
          right: 'right'
        }
      },
      verticalAlign: {
        options: {
          top: 'top',
          middle: 'middle',
          bottom: 'bottom'
        }
      },
      position: {
        options: posList.reduce(function (map, pos) {
          map[pos] = pos
          return map
        }, {})
      },
      distance: {
        min: 0,
        max: 100
      }
    }
    this.app.config = {
      rotate: 90,
      align: 'left',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15,
      onChange: function () {
        const labelOption = {
          rotate: this.app.config.rotate,
          align: this.app.config.align,
          verticalAlign: this.app.config.verticalAlign,
          position: this.app.config.position,
          distance: this.app.config.distance
        }
        this.myChart.setOption({
          series: [
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            }
          ]
        })
      }
    }
    this.labelOption = {
      show: true,
      position: this.app.config.position,
      distance: this.app.config.distance,
      align: this.app.config.align,
      verticalAlign: this.app.config.verticalAlign,
      rotate: this.app.config.rotate,
      formatter: '{c}  {name|{a}}',
      fontSize: 16,
      rich: {
        name: {}
      }
    }
    this.chartOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: []
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar', 'stack'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: []
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
      ]
    }
    this.fetchData()
  },
  methods: {
    dateChange (e) {
      if (e) {
        this.query.startTime = e[0]
        this.query.endTime = e[1]
      }
    },
    fetchData () {
      this.loading = true
      fetchData(this.url, this.query).then((res) => {
        if (res.data.data) {
          this.chartOption.xAxis[0].data = res.data.data.areaList
          this.chartOption.legend.data = res.data.data.industryList
          const series = []
          for (let i in res.data.data.resultItemList) {
            const title = res.data.data.resultItemList[i].title
            const dataList = res.data.data.resultItemList[i].dataList
            series.push({
              name: title,
              type: 'bar',
              label: this.labelOption,
              emphasis: {
                focus: 'series'
              },
              data: dataList
            })
          }
          this.chartOption.series = series
          this.myChart.setOption(this.chartOption)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style  scoped>
.chart-container {
  height: 600px;
}
</style>
